<template>
    <div class="quantum-well-material file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="content">
                    <div class="material-library">
                        <div class="title">材料库</div>
                        <div class="read">
                            <input class="pui-input" readonly v-model="componentRef.materialData.material" />
                        </div>
                        <div class="form">
                            <div class="list">
                                <div :class="['item', item.value === componentRef.materialData.material && 'active']" v-for="(item, i) in componentRef.materialList" :key="i" @click="selectMaterial(item)">{{ item.label }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="material-component">
                        <div class="title">材料组分</div>
                        <div class="form">
                            <div class="form-item">
                                <div class="label">X:</div>
                                <input class="pui-input" placeholder="请输入" v-model="componentRef.materialData.x" />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="submitHandle" type="primary">确定</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'MaterialCustom'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '材料'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const emit = defineEmits({
    onClose: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    materialData: {
        material: 'GaAs',
        x: 300
    },
    materialList: [
        {
            value: 'GaAs',
            label: 'GaAs',
        },
        {
            value: 'InP',
            label: 'InP',
        },
        {
            value: 'InAs',
            label: 'InAs',
        },
        {
            value: 'GaP',
            label: 'GaP',
        },
    ]
}) as any
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const submitHandle = () => {

}

const selectMaterial = (item: any) => {
    componentRef.materialData.material = item.value
}

defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>